<template>
    <a-card title="数据字典管理" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input v-model="searchForm.code" placeholder="字典代码"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.name" placeholder="字典名称"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-model="searchForm.description" placeholder="字典描述"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>
                <a-form-item>
                    <a-button icon="plus" type="danger" @click="openEdit()"> 新建</a-button>
                </a-form-item>
            </a-form>
        </template>
        <!-- 数据表格时开始 -->
        <a-table bordered :columns="columns" :rowKey="record => record.code" :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading" @change="handleTableChange">
            <template slot="hasLock" slot-scope="text, record">
                <a-switch checkedChildren="已锁定" unCheckedChildren="未锁定"
                          :defaultChecked="text === 1" @change="upLockStatus(record)"/>
            </template>
            <template slot="addtime" slot-scope="text">
                {{ $exMod.formatDate(text, 'yyyy-mm-dd hh:mm') }}
            </template>
            <template slot="operation" slot-scope="text, record">


                <a @click="openMxTable(record)">选项</a>
                <a-divider type="vertical"/>
                <a-dropdown>
                    <a class="ant-dropdown-link"> 操作
                        <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:;" @click="openEdit(record)"> 编辑 </a>
                        </a-menu-item>
                        <a-menu-item>
                            <a-popconfirm :title="`确定要删除【 ${record.name} 】这个字典吗?`"
                                          @confirm="() => delDictionart(record)"><span>删除</span></a-popconfirm>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>

            </template>
        </a-table>
        <MainEdit v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
        <TableMx :dictionaryInfo="dictionaryInfo" @closeMxFun="closeMxModal" v-if="mxModalShow"/>
    </a-card>
</template>
<script>
    import {pagination, dictmainTable} from '../public/columns.js';
    import {dictionaryList, dictionaryDel, dictionaryUpdate} from '../public/http.js';


    export default {
        components: {
            MainEdit: () => import('./MainEdit.vue'),
            TableMx: () => import('./TableMx.vue')

        },
        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                dataSource: [],
                pagination: {
                    ...pagination
                }, //复制预设的分页参数
                loading: false, //表格loading
                columns: dictmainTable, //表头管理
                searchForm: {
                    code: '',
                    message: '',
                    module: ''
                },
                dictionaryInfo: {}, //正在打开的明细数据
                mxModalShow: false, //明细弹窗打开状态
            };
        },
        methods: {
            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                dictionaryList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },
            //2.0打开编辑器
            openEdit(obj = {}) {
                this.editRecord = obj;
                this.editShow = true;
            },
            //2.1 关闭编辑器
            closeEdit(e) {
                this.editShow = false;
                if (e.render) {
                    this.getTableList();
                }
            },
            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },
            //4.0删除错误
            delDictionart(record) {
                this.loading = true;
                dictionaryDel(record.id).then(res => {
                    if (res.code == 0) {
                        //删除字典缓存
                        this.$store.commit('delDict', record.code);
                        //成功提醒
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message,
                        });
                        this.getTableList();
                    } else {
                        //错误提醒
                        this.$message.warning(res.message);
                    }
                    this.loading = false;
                });
            },
            //5.0打开明细列表弹窗
            openMxTable(record) {
                this.dictionaryInfo = record;
                this.mxModalShow = true;
            },
            //5.1关闭明细列表弹窗
            closeMxModal() {
                this.dictionaryInfo = {};
                this.mxModalShow = false;
            },


            //6.0 更新锁定字典锁定状态

            upLockStatus(record) {

                let newLock = record.hasLock == 0 ? 1 : 0;
                record.hasLock = newLock;
                dictionaryUpdate(record.id, record).then(res => {
                    if (res.code == 0) {
                        //成功提醒
                        this.$notification.success({
                            message: '操作成功',
                            description: res.message,
                        });
                        this.visible = false;
                        this.$emit('closeFun', {
                            render: true
                        });
                    } else {
                        //错误提醒
                        this.$notification.warning({
                            message: '操作失败',
                            description: res.message,
                        });
                    }
                })

            },

            //数据初始化
            async init() {
                this.getTableList();
            }


        },
        created() {
            //1.1 获取表格数据
            this.init();
        }
    };
</script>
